function Button(p_ctx, p_left, p_top)
{
	this.getHasFocus = function() { return this.hasFocus; }
	this.setHasFocus = function(p_focus) { this.hasFocus = p_focus; }
	this.setHasFocus(false);

	this.getText = function () { return this.text; }
	this.setText = function (p_text)
	{
	    this.text = p_text;
	    if (this.ctx) this.setWidth(this.ctx.measureText(this.text).width + 20);
	}
	this.setText("");
	
	this.getTop = function() { return this.top; }
	this.setTop = function(p_top) { if (p_top >= 0) this.top = p_top; }
	this.setTop(p_top?p_top : 0);

	this.getLeft = function() { return this.left; }
	this.setLeft = function(p_left) { if (p_left >=0) this.left = p_left; }
	this.setLeft(p_left?p_left : 0);

	this.getHeight = function() { return this.height; }
	this.setHeight = function(p_height) { if (p_height >= 0) this.height=p_height; }
	this.setHeight(50);

	this.getWidth = function() { return this.width; }
	this.setWidth = function(p_width) { if (p_width >= 0) this.width=p_width; }
	this.setWidth(100);
	
	this.getContext = function() { return this.ctx; }
	this.setContext = function(p_ctx) { this.ctx = p_ctx; }
	this.ctx = p_ctx? p_ctx : null;

	this.font="10pt Arial";
	this.back_color = "gray";
	this.fore_color = "black";		
	
	this.click = function(p_x, p_y)
	{		
		if (this.onClick) this.onClick(p_x, p_y);
	}
	this.mouseOver = function(p_x, p_y)
	{
		if (this.onMouseOver) this.onMouseOver(p_x, p_y);		
	}
	this.mouseOut = function() //no coordinates
	{
		//alert('button mouse out');
		if (this.onMouseOut) this.onMouseOut();		
	}
	this.mouseDown = function(p_x, p_y)
	{
		this.push_state = "down";
		this.render();
		if (this.onMouseDown ) this.onMouseDown(p_x, p_y);
	}
	this.mouseUp = function(p_x, p_y)
	{
		this.push_state = "up";
		this.render();
		if (this.onMouseUp) this.onMouseUp(p_x, p_y);
	}
	this.keyDown = function(key) //for control key events
	{
		var rslt = false;
		if (this.onKeyDown) rslt = this.onKeyDown(key);
		return rslt;
	}
	this.keyPress = function(key) //for printable character keys
	{	
		if (this.onKeyPress) this.onKeyPress(key);
	}


	this.render = function()
	{	
		var color_north_west = "#dddddd";
		var color_middle = "#cccccc";
		var color_south_west = "#bbbbbb";
		if (this.push_state == "down")
		{
			color_south_west = "#dddddd";
			color_north_west = "#bbbbbb";
		}
		else if (this.push_state == "flat") 
		{
			var color_south_west = "#dddddd";			
		}

		this.ctx.textBaseline = "middle";
		this.ctx.font = this.font;
		this.ctx.fillStyle = color_north_west;
		this.ctx.fillRect (this.left, this.top, this.width, this.height);		
		this.ctx.fillStyle = color_middle;
		this.ctx.fillRect (this.left + 4, this.top + 4, this.width  - 4, this.height - 4);
				
		this.ctx.fillStyle = color_south_west;
		this.ctx.beginPath();		
		this.ctx.moveTo(this.left+this.width, this.top );
		this.ctx.lineTo(this.left+this.width, this.top+this.height);
		this.ctx.lineTo(this.left, this.top + this.height);
		this.ctx.lineTo(this.left + 4, this.top + this.height - 4);
		this.ctx.lineTo(this.left + this.width - 4, this.top + this.height - 4);
		this.ctx.lineTo(this.left + this.width - 4, this.top + 4);
		this.ctx.lineTo(this.left+this.width, this.top );
		this.ctx.closePath();
		this.ctx.fill();
		if (this.text.length>0)
		{
			var txtwidth = this.ctx.measureText(this.text).width;
			this.ctx.fillStyle = "black";
			this.ctx.fillText(this.text, this.left+this.width/2-txtwidth/2, this.top+this.height/2);
		}
	}
	
	//this.render();
}